<template>
  <div class="basic_info">
    <div class="move_mask" v-show="moving">
      <div class="div_tree">
        <div class="tree_div1">
          <p style="font-weight: 500">网店商品类别</p>
          <p @click="cancelMove">取消</p>
        </div>
        <div class="tree_input">
          <p>
            <input type="text" placeholder="查找" v-model="filterText" />
            <span>
              <i class="el-icon-search"></i>
            </span>
          </p>
        </div>
        <div class="tree_structure">
          <el-tree
            ref="tree1"
            :data="treeData"
            node-key="label"
            :props="defaultProps"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="handleMoveNode"
            :filter-node-method="filterNode"
          >
            <span class="tree_node" slot-scope="{ node }">
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
      </div>
    </div>
    <div class="info_tabs">
      <el-tabs v-model="queryData.status" @tab-click="handleClick">
        <el-tab-pane label="已上架"  name="10"></el-tab-pane>
        <el-tab-pane label="未上架" name="20"></el-tab-pane>
        <!-- name="alreadyListed" -->
        <!-- name="notListed"  -->
      </el-tabs>
      <el-button type="primary" @click="viewProduct">查看进销存商品</el-button>
    </div>
    <div class="info_operation_btn">
      <div class="btn_left">
        <el-button
          :disabled="!buttonsPermissions.XinZeng"
          :class="!buttonsPermissions.XinZeng ? 'disabled_button' : ''"
          @click="onShowAdd"
          >新增</el-button
        >
        <!-- 批量上/下架 -->
        <el-button v-if="queryData.status == '10'" :class="[!(batchData.length > 0 && buttonsPermissions.XiuGai) ? 'disabled_button' : '']"
          :disabled="!(batchData.length > 0 && buttonsPermissions.XiuGai)" @click="handleChangeStatus(20,batchData)" style="background:#FD6C21 ;color: #fff;">下架</el-button>
        <el-button v-if="queryData.status == '20'" :class="[!(batchData.length > 0 && buttonsPermissions.XiuGai) ? 'disabled_button' : '']"
          :disabled="!(batchData.length > 0 && buttonsPermissions.XiuGai)" @click="handleChangeStatus(10,batchData)" type="primary" style="border: none;">上架</el-button>
        <el-button
        :class="[!(batchData.length > 0 && buttonsPermissions.XiuGai) ? 'disabled_button' : '']"
        :disabled="!(batchData.length > 0 && buttonsPermissions.XiuGai)"
        @click="batchEdit"
        >
          批量编辑信息
        </el-button>
        <el-button
          :disabled="!(batchData.length > 0 && buttonsPermissions.XiuGai)"
          :class="[!(batchData.length > 0 && buttonsPermissions.XiuGai) ? 'disabled_button' : '']"
          @click="moveToCategary"
        >
          移动到
        </el-button>
        <el-button :disabled="!buttonsPermissions.DaoRu" @click="importImg">批量导入图片</el-button>
        <!-- <el-select v-model="importValue">
          <el-option
            label="导入"
            value="导入"
            :disabled="!buttonsPermissions.DaoRu"
            :style="!buttonsPermissions.DaoRu ? 'pointer-events: none; font-size: 12px' : 'font-size: 12px'"
            @click.native="importExcel"
          ></el-option>
          <el-option
            label="导出"
            value="导出"
            :disabled="!buttonsPermissions.DaoChu"
            :style="!buttonsPermissions.DaoChu ? 'pointer-events: none; font-size: 12px' : 'font-size: 12px'"
            @click.native="exportExcel"
          ></el-option>
        </el-select>-->
        <!-- <div
          :class="[batchData.length > 0 && buttonsPermissions.XiuGai ? 'pretend_view active' : 'pretend_view']"
          @click="changePrice"
        >
          批量调价
        </div>
        <div
          :class="[batchData.length > 0 && buttonsPermissions.XiuGai ? 'pretend_view active' : 'pretend_view']"
          @click="changeDiscount"
        >
          批量调折扣
        </div>
        <div
          :class="[batchData.length > 0 && buttonsPermissions.XiuGai ? 'pretend_view active' : 'pretend_view']"
          @click="changeExtendProperty"
        >
          批量改扩展属性
        </div>
        <el-select v-model="enableValue" style="margin-left: 5px;">
          <el-option
            style="font-size: 12px;"
            @click.native="onBatchChangeStatus(enableValue)"
            v-for="item in enableOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select> -->
        <el-button
          :disabled="!buttonsPermissions.ShanChu"
          :class="!buttonsPermissions.ShanChu ? 'disabled_button' : ''"
          @click="onBatchDelete"
          >批量删除</el-button
        >
        
        <!-- <el-checkbox v-model="queryData.disabledStatus" @change="getTableData()" style="line-height: 30px;margin-left: 5px;">显示停用商品</el-checkbox> -->
      </div>
      <div class="btn_right">
        <el-input v-model="queryData.queryParam" placeholder="请输入商品名称\编码"></el-input>
        <el-button type="primary" @click="onQuery">搜索</el-button>
        <el-button @click="onRefresh">刷新</el-button>
        <i @click="onShowColumn" class="set_up el-icon-s-tools"></i>
      </div>
    </div>
    <div class="info_content_div">
      <div class="div_tree" :class="editTreeDataSta == false ? 'new_div_tree_width' : ''">
        <div class="tree_div1">
          <p>网店商品类别</p>
          <p v-if="editTreeDataSta" @click="editTreeDataSta = false">编辑</p>
          <el-button v-else type="primary" @click="editTreeDataSta = true">完成编辑</el-button>
        </div>
        <div class="tree_input">
          <p>
            <input type="text" placeholder="查找" v-model="filterText" />
            <span>
              <i class="el-icon-search"></i>
            </span>
          </p>
        </div>
        <div class="tree_structure">
          <el-tree
            ref="tree"
            :data="treeData"
            node-key="label"
            :props="defaultProps"
            highlight-current
            :default-expand-all="treeExpandAll"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
          >
            <span v-if="editTreeDataSta == false" class="tree_node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <div class="show_nodex">
                <span v-if="!data.id" style="color: #1c94fa; margin-right: 10px" @click.stop="treeExpandChange">{{
                  treeExpandAll ? '收缩全部' : '展开全部'
                }}</span>
                <i v-if="nowLabel == data.id" class="el-icon-circle-plus-outline" @click.stop="onAddTree(data)"></i>
                <i
                  v-if="data.id !== '' && nowLabel == data.id"
                  class="el-icon-edit-outline"
                  @click.stop="onEditTree(node, data)"
                ></i>
                <i
                  v-if="data.id !== '' && nowLabel == data.id"
                  class="el-icon-delete"
                  @click.stop="onDeleteTree(data)"
                ></i>
              </div>
            </span>
            <span v-else class="tree_node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span v-if="!data.id" style="color: #1c94fa" @click.stop="treeExpandChange">{{
                treeExpandAll ? '收缩全部' : '展开全部'
              }}</span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="div_table" :class="editTreeDataSta == false ? 'new_div_table_width' : ''">
        <div class="table_content">
          <el-table
            :data="tableData.records"
            height="100%"
            border
            tooltip-effect="dark"
            highlight-current-row
            :header-cell-style="{ background: '#EDEDED', color: '#666666', textAlign: 'center' }"
            @selection-change="handleSelectionChange"
            ref="table"
          >
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column label="操作" :resizable="false" min-width="150px" align="center">
              <template slot-scope="scope">
                <div>
                  <el-button type="text" v-if="queryData.status == '10' && buttonsPermissions.XiuGai" style="color: #FD6C21;" @click="handleChangeStatus(20,scope.row)">下架</el-button>
                  <el-button type="text" v-if="queryData.status == '20' && buttonsPermissions.XiuGai" style="color: #FD6C21;" @click="handleChangeStatus(10,scope.row)">上架</el-button>
                  <el-button type="text" v-if="buttonsPermissions.XiuGai" @click="onEditRow(scope.row)">编辑</el-button>
                  <el-button type="text" @click="onEditRow(scope.row,true)">详情</el-button>
                </div>
                <!-- <i v-if="buttonsPermissions.XiuGai" @click="onEditRow(scope.row)" class="el-icon-edit-outline"></i>
                <i v-if="buttonsPermissions.ShanChu" @click="onDeleteRow(scope.row)" class="el-icon-delete"></i> -->
              </template>
            </el-table-column>
            <template v-for="(item, i) in columnData">
              <el-table-column
                :key="i"
                :show-overflow-tooltip="true"
                :prop="item.props"
                :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                v-if="item.zidingyiState"
                min-width="150px"
                :resizable="false"
                :width="item.cellWidth"
                align="center"
              >
                <template slot="header" slot-scope="scope">
                  <div v-if="item.props.includes('extendField')" style="width: 100%">
                    <el-input
                      v-if="item.props == editProps"
                      v-model="item.zidingyiName"
                      size="mini"
                      placeholder="请输入"
                      maxlength="10"
                      style="padding-left: 3px"
                    >
                      <div slot="suffix" style="color: #1c94fa; line-height: 28px" @click="onSaveExtend()">保存</div>
                    </el-input>
                    <div
                      v-else
                      style="
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 0 10px;
                      "
                    >
                      <span>{{ item.zidingyiName || item.morenName }}</span>
                      <img
                        :src="require('@/assets/extend_edit.png')"
                        style="width: 12px; height: 12px"
                        @click="editProps = item.props"
                      />
                    </div>
                  </div>
                  <span v-else>{{ item.zidingyiName || item.morenName }}</span>
                </template>
                <template slot-scope="scope">
                  <span v-if="item.props == 'goodsImg' && scope.row.xghGoods">
                    <el-image v-if="scope.row.xghGoods.goodsImg" :src="scope.row.xghGoods.goodsImg.includes(',') ? scope.row.xghGoods.goodsImg.split(',')[0] : scope.row.xghGoods.goodsImg" style="width: 50px;height: 50px;"></el-image>
                    <span v-else></span>
                  </span>
                  <span v-else-if="item.props == 'jxcgoodsName'  && scope.row.xghGoods">{{ scope.row.xghGoods.goodsName }}</span>
                  <span v-else-if="item.props == 'jxcgoodsNumber'  && scope.row.xghGoods">{{ scope.row.xghGoods.goodsNumber }}</span>
                  <span v-else-if="item.props == 'delivery'  && scope.row.delivery">{{ scope.row.delivery.name }}</span>
                  <span v-else-if="item.props == 'status'">{{ scope.row.status == '10' ? '上架' : '下架' }}</span>
                  <span v-else-if="item.props == 'goodsWeight'">{{ scope.row.goodsSkuList.map(sku => sku.goodsWeight).join(', ') }}kg</span>
                  <span v-else-if="item.props == 'linePrice'">{{ scope.row.goodsSkuList.map(sku => $formatPrice(sku.linePrice)).join(', ') }}</span>
                  <span v-else-if="item.props == 'goodsPrice'">{{ scope.row.goodsSkuList.map(sku => $formatPrice(sku.goodsPrice)).join(', ') }}</span>
                  <span v-else-if="item.props == 'number' || item.props == 'useNumber'">
                    {{ $formatNumber(scope.row[item.props]) }}
                  </span>
                  <span v-else>{{ scope.row[item.props] }}</span>
                </template>
              </el-table-column>
            </template>
            <!-- <el-table-column label="状态" :resizable="false" fixed="right">
              <template slot-scope="scope">
                <el-switch
                  @change="onChangeStatus(scope.row)"
                  v-model="scope.row.disabledStatus"
                  active-color="#1A93FA"
                  inactive-color="#D3D2D2"
                ></el-switch>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
        <div class="total_record">
          <p>合计</p>
          <p>共{{ tableData.total }}条记录</p>
        </div>
        <div class="table_pagination">
          <div class="pagination_div">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="pagesize"
              layout="jumper, prev, pager,next, sizes"
              :total="tableData.total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 列配置弹框 -->
    <CConfiguration
      ref="setColumnRef"
      :columnDataArr="columnData"
      :defaultColumnDataArr="defaultColumnData"
      orderType="网店商品"
      @onSaveColumn="onSaveColumn"
    ></CConfiguration>
    <!-- 新增树形结构数据弹框 -->
    <el-dialog
      :title="this.newTreeData.module.name == 'deptName' ? '部门' : '类别信息'"
      :visible.sync="showNewTree"
      width="480px"
    >
      <!-- <NewCategory
        :newTreeData="newTreeData"
        @onSaveTreeChanges="onSaveTreeChanges"
        @onCancelTree="showNewTree = false"
      ></NewCategory> -->
    </el-dialog>
    <!-- 新增商品弹框 -->
    <DialogCommodityAdd
      ref="commodityAddRef"
      @dialogVisibleClose="onCloseAddCommodity"
      @onAddSubmit="onAddCommodity"
    ></DialogCommodityAdd>
    <!-- 修改商品弹框 -->
    <!-- <DialogCommodityEdit
      ref="commodityEditRef"
      :newData="newData"
      @dialogVisibleClose="onCloseEditCommodity"
      @onEditSubmit="onEditCommodity"
    ></DialogCommodityEdit>-->
    <!-- 提醒弹框 -->
    <PopupReminder ref="reminderRef" :tipsData="tipsData" @dialogVisibleClose="onNo" @onConfirm="onYes"></PopupReminder>
    <!-- 成功弹框 -->
    <PopupSuccess ref="successRef" :tipsData="tipsData"></PopupSuccess>
    <PopupImportSuccess ref="successImportRef" :tipsData="tipsData"></PopupImportSuccess>
    <!-- 导入 -->
    <!-- <DialogImport
      ref="daoru"
      :titles="columnData"
      url="/xghGoods/xghGoods/importExcel"
      :isGoods="true"
      @importData="importData"
      @downloadTemplate="exportExcel"
    ></DialogImport> -->
    <!-- 批量编辑信息 -->
    <DialogBatchEdit ref="batchEditRef" :newData="batchData" @onEditRow="onEditRow" @onQuery="onQuery" @onEditSubmit="onAddCommodity"></DialogBatchEdit>
    <DialogImportImg
      ref="daoruImg"
      :titles="columnData"
      url="/goods/yoshopGoods/importImgBatch"
      :isGoods="true"
      @importData="importData"
      @downloadTemplate="exportExcel"
    ></DialogImportImg>
    <!-- 分类弹框 -->
    <DialogCategory ref="categoryDialogRef"></DialogCategory>
<dialogAddCreate ref="AddForm" :categoryList="categoryList" @handleSubmit="getData" />

    <dialog-goods-adjust ref="goodsAdjust" @onUpdatePrice="onAddCommodity"></dialog-goods-adjust>
    <!-- 批量修改商品扩展属性 -->
    <div class="changeExtend">
      <el-dialog title="批量修改商品扩展属性" :visible.sync="extendVisible" width="480px">
        <div class="extendView">
          <div style="min-width: 170px">
            <div class="title">扩展属性名称</div>
            <div v-for="item in extendValues" :key="item.props" class="extendItem">
              <div style="height: 28px; line-height: 28px">{{ item.zidingyiName }}</div>
            </div>
          </div>
          <div style="width: 200px">
            <div class="title" style="text-align: center">扩展属性信息</div>
            <div v-for="item in extendValues" :key="item.props" class="extendItem" style="width: 200px">
              <el-input v-model="item.textValue" size="mini" placeholder="请输入" style="width: 100%"></el-input>
            </div>
          </div>
        </div>
        <div class="dialog_bottom">
          <el-button type="primary" size="small" @click.stop="onExtendConfirm">保存</el-button>
          <el-button  size="small" @click.stop="onExtendCancel">取消</el-button>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CConfiguration from '@/components/c_column/columnConfiguration1'
import NewCategory from '@/components/c_category/NewCategory'
import DialogCommodityAdd from '../components/dialogCommodityShopAdd'
// import DialogCommodityEdit from '../components/dialogCommodityEdit'
import PopupReminder from '../components/popupReminder'
import PopupSuccess from '../components/popupSuccess'
import PopupImportSuccess from '../components/popupImportSuccess'
import DialogBatchEdit from '../components/dialogBatchEdit'
import DialogImportImg from '../components/dialogImportImg'
import DialogCategory from '../components/dialogCategory'
import dialogAddCreate from '../components/dialogAddCreate'
import { getAction, putAction, deleteAction, downPostFile, postAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import dialogGoodsAdjust from '../components/dialogGoodsAdjust.vue'
// 导入调用处理权限数据方法
import { handlePermissions, handleOtherPerms } from '@/utils/index'
import { delcommafy, formatMoney, formatNumber, formatPrice } from '@/utils'
import { ACCOUNT_BOOK } from '@/store/mutation-types'
import Vue from 'vue'
export default {
  name: 'onlineShopGoods',
  mixins: [JeecgListMixin],
  components: {
    CConfiguration,
    NewCategory,
    DialogCommodityAdd,
    // DialogCommodityEdit,
    PopupReminder,
    PopupSuccess,
    PopupImportSuccess,
    DialogBatchEdit,
    DialogImportImg,
    DialogCategory,
    dialogAddCreate,
    dialogGoodsAdjust
  },
  computed: {
    ...mapGetters(['name']),
    buttonsPermissions() {
      return handlePermissions('商品信息')
    },
  },
  created() {
    // 接口需要增加参数
    const data = this.$route.params.data
    if (data && data.storehouseId && data.goodsId) {
      this.queryData.storehouseId = this.$route.params.data.storehouseId
      this.queryData.goodsId = this.$route.params.data.goodsId
    }
    this.title = '商品信息'
    this.selectTitle()
    this.getData()
  },
  watch: {
    // 'queryData.disabledStatus': {
    //   deep: true,
    //   handler () {
    //     this.getTableData()
    //   },
    // },
    filterText(val) {
      this.$refs.tree.filter(val)
      this.$refs.tree1.filter(val)
    },
    getInventory(nVal, oVal) {
      if (nVal && !oVal) {
        this.tableData.records.forEach((item) => {
          this.getInventoryById(item)
        })
      }
    },
    // 路由变化时，更新数据
    $route: {
      immediate: true,
      handler(val) {
        if (val.name === 'baseInfomation-material-commodityInfo') {
          const data = this.$route.params.data
          const goodsName = this.$route.params.goodsName
          if (
            data &&
            data.storehouseId &&
            data.storehouseId != this.queryData.storehouseId &&
            data.goodsId &&
            data.goodsId != this.queryData.goodsId
          ) {
            this.queryData.storehouseId = data.storehouseId
            this.queryData.goodsId = data.goodsId
            this.getTableData()
          }
          if (goodsName) {
            this.queryData.queryParam = goodsName
            this.getTableData()
          }
        }
      },
    },
  },
  data() {
    return {
      categoryList:[],
      // 账套id
      accountBookId:Vue.ls.get(ACCOUNT_BOOK).id,
      // 表格模拟数据
      tableData: [
        {
          goodsNumber: '123456',
          goodsName: '商品名称',
          goodsImg: 'https://img.yzcdn.cn/vant/ipad.png',
        },
      ],
      moving: false,
      extendValues: [],
      newData: {
        id: '',
        goodsName: '', //商品名称
        pinyinCode: '',
        goodsNumber: '', //商品编码
        productionAddress: '', //产地
        goodsNatureId: '1', //商品性质id 1：服务、2.劳务 3.商品（无成本）
        goodsNatureName: '',
        categoryId: '', //商品类别
        xghGoodsTypeName: '',
        costCalculation: '1', //成本核算
        barCode: '', //条形码
        specs: '', //规格
        defaultUnit: '', //默认单位
        baseUnit: '', //基本单位
        multiPriceStatus: false, //多单位状态 0:开启 1:关闭
        priceStatus: true, //价格管理状态 0:开启 1:关闭
        stockWarningStatus: true, //库存预警状态 0:开启 1:关闭
        multiStockWarningStatus: false, //分库存预警状态 0:开启 1:关闭
        stockStatus: false, //期初库存状态 0:开启 1:关闭
        multiStockStatus: false, //分期初库存状态 0:开启 1:关闭

        specialFunction: false, //商品特殊功能模块，1开启，0关闭
        specialFunctionColorId: '', //
        specialFunctionColorStr: '', //
        specialFunctionSizeId: '', //关联尺码属性id（多个逗号分隔）
        specialFunctionSizeStr: '', //
        specialFunctionStr: '', //
        specialFunctionType: '', //

        goodsRemark: '', //备注
        goodsManyNorms: [
          //多单位及价格表数据
          {
            fakeId: '0',
            isDefault: '1', //是否是基本单位
            unitType: '基本单位', //单位类别 1.基本单位2.辅助单位
            unit: '', //单位
            scale: 1, //换算比例
            retailPrice: '', //零售价
            barCode: '', //条形码
            specs: '', //规格
            vipPric: '', //会员价
            presetPriceOne: '', //预设售价1
            presetPriceTwo: '', //预设售价2
            presetBidPrice: '', //预设进价
            discountRatioOne: '', //预设折扣1
            discountRatioTwo: '', //预设折扣2
            xhState: true,
          },
        ],
        goodsWarnings: [
          //仓库预警数据
          {
            fakeId: '0',
            xghStorehouseId: '', //仓库id
            xghStorehouseName: '总数量预警',
            miniStock: 0, //最低库存
            highStock: 0, //最高库存
            xhState: true,
          },
        ],
        initialInventoryInfos: [],
      },
      queryData: {
        // disabledStatus: false, //停用状态
        status: '10', //商品状态(10上架 20下架)
        queryParam: '',
        categoryId: '',
        storehouseId: '',
        goodsId: '',
      },
      // 传递给弹框的数据
      tipsData: {
        tipsState: '',
        tipsWords: '',
        tipsMark: '',
      },
      pagesize: 20, //每页的数据条数
      currentPage: 1, //默认开始页面
      nowLabel: '',
      tableData: {
        records: [],
        total: 0,
      },
      // 列配置数据
      defaultColumnData: [],
      columnData: [
        {
          morenName: '商品图片',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'goodsImg',
        },
        {
          morenName: '网店商品名称',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: true,
          props: 'goodsName',
          isRequired: true,
        },
        {
          morenName: '网店商品分类',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          cellWidth: '150px',
          noModify: false,
          props: 'categoryId_dictText',
        },
        {
          morenName: '进销存商品名称',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'jxcgoodsName',
        },
        {
          morenName: '进销存商品编码',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'jxcgoodsNumber',
        },
        {
          morenName: '库存数量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          cellWidth: '150px',
          noModify: false,
          props: 'stockTotal',
        },
        {
          morenName: '商品状态',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          cellWidth: '150px',
          noModify: false,
          props: 'status',  // 10上架 20下架
        },
        {
          morenName: '网店排序值',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          cellWidth: '150px',
          noModify: false,
          props: 'sort',
        },
        {
          morenName: '网店商品单位',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'unitId_dictText',
        },
        {
          morenName: '网店商品价格',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'linePrice',
        },
        {
          morenName: '网店商品优惠价',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'goodsPrice',
        },
        {
          morenName: '初始销量',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          cellWidth: '150px',
          noModify: false,
          props: 'salesInitial',
        },
        {
          morenName: '网店商品重量',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'goodsWeight',
        },
        {
          morenName: '运费模板',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          noModify: false,
          props: 'delivery',
        },
        {
          morenName: '网店商品备注',
          zidingyiName: '',
          morenState: true,
          zidingyiState: true,
          cellWidth: '150px',
          noModify: false,
          props: 'remark',
        },
      ],
      // 传递数据给新增树形结构组件
      newTreeData: {
        parentNode: '',
        nowNode: '',
        module: {
          name: '',
        },
      },
      importValue: '导入',
      enableOptions: [
        {
          value: true,
          label: '批量启用',
        },
        {
          value: false,
          label: '批量停用',
        },
      ],
      enableValue: true,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      editTreeDataSta: true, //编辑单位类别状态
      batchData: [], // 存储多选的数据
      showNewTree: false, // 显示新增树形结构弹框
      GoodsTypeName: '',
      nowTreeId: '', //暂存删除树形节点id
      nowData: {}, //暂存当前行数据
      nowStatus: '', //暂存启用禁用下拉框状态
      nowDataId: '', //暂存删除表数据id
      updateId: '', // 修改列配置时返回的id
      filterText: '',
      url: {
        // goodsList: '/xghGoods/xghGoods/listYouHua',
        goodsList: '/goods/yoshopGoods/list',
        api: '网店商品',
        exportXlsUrl: '/xghGoods/xghGoods/exportXls',
      },
      treeExpandAll: true,
      getInventory: false, //是否显示可用数量
      editProps: '', //当前编辑的扩展字段名
      extendVisible: false,
    }
  },
  mounted() {
    // this.selectTitle()
  },
  methods: {
    openCategoryDialog(){
      this.$refs.categoryDialogRef.dialogVisible = true
    },
    //改变上下架状态
    handleChangeStatus(status,data) {
      // data有可能是一个也可能是多个
      let goodsIds = '';
      if (Array.isArray(data)) {
        // 如果 data 是数组，遍历数组获取每个对象的 goodsId 并以逗号分隔
        goodsIds = data.map(item => item.goodsId).join(',');
      } else {
        // 如果 data 是单个对象，直接获取 goodsId
        goodsIds = data.goodsId;
      }
      // 10上架 20下架 
      getAction('/goods/yoshopGoods/toggleGoodsShelfStatus', {
        goodsId: goodsIds, //多个商品id用逗号分割
        status: status, //10上架 20下架
      }).then((res) => {
        if (res.code === 200) {
          this.$elMessage.success(res.message)
          this.getTableData()
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    // 批量编辑信息
    batchEdit(){
      this.$refs.batchEditRef.dialogVisible = true
    },
    // 查看进销存商品 跳转商品信息页
    viewProduct() {
      this.$router.push({
        path: '/baseInfomation/material/commodityInfo',
      })
    },
    // 点击tab项
    handleClick(tab, event) {
      console.log(tab, event);
      // 获取已上架/未上架商品信息
      this.getTableData()
    },
    getInventoryById(item) {
      let data = {
        goodsId: item.id,
      }
      getAction('/xghGoods/xghGoods/getInventoryByGoodId', data).then((res) => {
        this.tableDataLoading = false
        if (res.code === 200) {
          let result = res.result || {}
          item.useNumber = result.useNumber
          item.number = result.number
        }
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    treeExpandChange(val) {
      this.treeExpandAll = !this.treeExpandAll
      let nodes = this.$refs.tree.root.childNodes
      this.setNodes(nodes, this.treeExpandAll)
    },
    setNodes(list, expand) {
      list.forEach((item) => {
        item.expanded = expand
        let cr = item.childNodes
        if (cr.length > 0) {
          this.setNodes(cr, expand)
        }
      })
    },
    // 初始化查询列配置值
    async selectTitle() {
      let obj = await this.$setColumn.selectColumn(this.url.api)
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.columnData = obj.columnData
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn(this.url.api, this.$options.data().columnData)
        this.updateId = id
      }

      // let useNumber = this.columnData.find((item) => item.props == 'useNumber').zidingyiState
      // let number = this.columnData.find((item) => item.props == 'number').zidingyiState
      // this.getInventory = useNumber || number
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn(value) {
      this.columnData = value
      let res = await this.$setColumn.editColumn(this.url.api, this.columnData, this.updateId)
      if (res.code == 200) {
        this.$elMessage.success(res.message)
      } else {
        this.$elMessage.error(res.message)
      }
      // let useNumber = this.columnData.find((item) => item.props == 'useNumber').zidingyiState
      // let number = this.columnData.find((item) => item.props == 'number').zidingyiState
      // this.getInventory = useNumber || number


      this.$forceUpdate()
    },
    onSaveExtend() {
      this.editProps = ''
      this.onSaveColumn(this.columnData)
    },
    // 获取数据
    getData() {
      this.getTreeData()
      this.getTableData()
    },
    // 获取类别数据
    // getTreeData() {
    //   getAction('/yoshopCategory/categoryAllList', {storeId:this.accountBookId}).then((res) => {
    //     if (res.code === 200) {
    //       let list = res.result
    //       // let result = this.getTreeDataByList(list, '0', '')
    //       let result = list

    //       this.categoryList = list
    //       this.treeData = [
    //         {
    //           id: '',
    //           label: '全部',
    //           children: result,
    //         },
    //       ]
    //       console.log("树形结构",this.treeData)
    //     }
    //   })
    // },
    // 获取类别数据
getTreeData() {
  getAction('/yoshopCategory/categoryAllList', { storeId: this.accountBookId }).then((res) => {
    if (res.code === 200) {
      let list = res.result;
      // 递归处理数据，添加label字段
      const processData = (data) => {
        data.forEach((item) => {
          item.id = item.categoryId;
          item.label = item.name;
          if (item.children && item.children.length > 0) {
            processData(item.children);
          }
        });
        return data;
      };
      let result = list;
      result = processData(result);

      this.categoryList = list;
      this.treeData = [
        {
          id: '',
          label: '全部',
          children: result,
        },
      ];
      console.log("树形结构", this.treeData);
    }
  });
},
    getTreeDataByList(list, parentId, parentName) {
      let data = []
      for (let index = 0; index < list.length; index++) {
        const element = list[index]
        if (element.parentId == parentId) {
          data.push({
            ...element,
            id: element.categoryId,
            label: element.name,
            parentId,
            parentName,
            children: this.getTreeDataByList(list, element.categoryId, element.companyTypeName),
          })
        }
      }
      return data
    },
    // 获取表格数据
    getTableData(page = 1) {
      console.log(page)
      let data = {
        ...this.queryData,
        storeId: this.accountBookId,
        pageSize: this.pagesize,
        pageNo: page || 1, //只有切换页码时这个值会变化，其他触发都是第一页
      }
      // if (data.disabledStatus !== '') {
      //   data.status = data.disabledStatus ? '2' : '1'
      // }
      getAction(this.url.goodsList, data).then((res) => {
        if (res.code === 200) {
          this.currentPage = page || 1 // 保持和数据一致，不然分页显示不正常
          this.tableData = res.result
          if (this.tableData.records.length > 0) {
            this.tableData.records.forEach((item) => {
              item.disabledStatus = item.disabledStatus == 1 ? true : false
              if (this.getInventory) {
                this.getInventoryById(item)
              }
            })
          }
        }
      })
    },
    // 提醒弹框确认后操作
    onYes(mark) {
      if (mark == 'onBatchDelete') {
        var idsDel = []
        this.batchData.forEach((item) => {
          idsDel.push(item.goodsId)
        })
        console.log("idsDel",idsDel)
        deleteAction('/goods/yoshopGoods/deleteBatch', {
          ids: idsDel.toString(),
        }).then((res) => {
          if (res.code === 200) {
            this.$elMessage.success(res.message)
            this.getTableData()
            let arr = this.$lcStorage.get('spHistoricalRecords') || []
            idsDel.forEach((item) => {
              arr.forEach((val, key) => {
                if (item === val.id) {
                  arr.splice(key, 1)
                  return
                }
              })
            })
            this.$lcStorage.set('spHistoricalRecords', arr)
          } else {
            this.$elMessage.error(res.message)
          }
        })
      } else if (mark == 'onDeleteRow') {
        let data = {
          id: this.nowDataId,
        }
        deleteAction('/xghGoods/xghGoods/delete', data).then((res) => {
          if (res.code === 200) {
            this.$elMessage.success(res.message)
            this.getTableData()
            let arr = this.$lcStorage.get('spHistoricalRecords') || []
            arr.forEach((item, index) => {
              if (item.id === this.nowDataId) {
                arr.splice(index, 1)
              }
            })
            this.$lcStorage.set('spHistoricalRecords', arr)
          } else {
            this.$elMessage.error(res.message)
          }
        })
      } else if (mark == 'onBatchChangeStatus') {
        let ids = []
        this.batchData.forEach((item) => {
          ids.push(item.id)
        })
        let data = {
          id: ids.toString(),
          disabledStatus: this.nowStatus ? '1' : '2',
        }
        postAction('/xghGoods/xghGoods/updateGoodsStatus', data).then((res) => {
          if (res.code === 200) {
            this.$elMessage.success(res.result)
            this.getTableData()
          } else {
            this.$elMessage.error(res.message)
          }
        })
      } else if (mark == 'onChangeStatus') {
        let data = {
          id: this.nowData.id,
          disabledStatus: this.nowData.disabledStatus ? '1' : '2',
        } //禁用状态 1-正常，2-冻结
        postAction('/xghGoods/xghGoods/updateGoodsStatus', data).then((res) => {
          if (res.code === 200) {
            this.$elMessage.success(res.result)
            this.getTableData()
          } else {
            this.nowData.disabledStatus = !this.nowData.disabledStatus
            this.$elMessage.error(res.message)
          }
        })
      } else if (mark == 'onDeleteTree') {
        let data = {
          id: this.nowTreeId,
        }
        deleteAction('/yoshopCategory/delete', data).then((res) => {
        if (res.code === 200) {
          this.$elMessage.success(res.message)
          this.getData()
        } else {
          this.$elMessage.error(res.message)
        }
      })
      }
    },
    // 提醒弹框确认后操作
    onNo(mark) {
      if (mark == 'onChangeStatus') {
        this.tableData.records.forEach((item) => {
          if (item.id == this.nowData.id) {
            item.disabledStatus = !item.disabledStatus
          }
        })
      }
    },
    // 新增
    handleShortcutKeyAdd() {
      this.onShowAdd()
    },
    // 触发新增数据按钮
    onShowAdd() {
      if (!this.buttonsPermissions.XinZeng) {
        this.$elMessage.warning('未拥有新增权限！')
        return
      }
      const that = this
      this.$nextTick(() => {
        that.$refs.commodityAddRef.show(this.newData,{},this.columnData, '1')
      })
    },
    // 批量启用禁用数据
    onBatchChangeStatus(val) {
      if (this.batchData.length) {
        this.nowStatus = val
        this.tipsData.tipsWords = `是否确认${val ? '批量启用' : '批量停用'}?`
        this.tipsData.tipsMark = 'onBatchChangeStatus'
        this.$refs.reminderRef.dialogVisible = true
      } else {
        this.$elMessage({
          showClose: true,
          message: '请先选择需要' + (val ? '启用' : '停用') + '的数据！',
          type: 'error',
          iconClass: 'el-icon-warning-outline',
          duration: 3000,
        })
      }
      this.enableValue = true
    },
    // 批量删除数据
    onBatchDelete() {
      if (this.batchData.length) {
        this.tipsData.tipsState = 'delete'
        this.tipsData.tipsWords = '是否确认批量删除?'
        this.tipsData.tipsMark = 'onBatchDelete'
        this.$refs.reminderRef.dialogVisible = true
      } else {
        this.$elMessage({
          showClose: true,
          message: '请先选择需要删除的数据！',
          type: 'error',
          iconClass: 'el-icon-warning-outline',
          duration: 3000,
        })
      }
    },
    // 搜索
    onQuery() {
      this.currentPage = 1
      this.getTableData()
    },
    // 刷新
    onRefresh() {
      Object.assign(this.$data, this.$options.data())
      this.selectTitle()
      this.getTreeData()
      this.getTableData()
      this.editTreeDataSta = true
    },
    // 触发列配置弹框
    onShowColumn() {
      this.defaultColumnData = this.$options.data().columnData
      this.$refs.setColumnRef.dialogVisible = true
    },
    // 搜索树形结构数据
    onSelectTree() {
      this.getTreeData()
    },
    // 触发树形当前节点
    handleNodeClick(data) {
      if (this.editTreeDataSta) {
        this.queryData.categoryId = data.id
        this.newData.categoryId = data.id
        this.getTableData()
      } else {
        this.nowLabel = data.id
      }
    },
    // 移动到当前分类
    handleMoveNode(data) {
      // this.$elMessage.success('移动成功！')
      // this.cancelMove()
      let list = []
      for (let index = 0; index < this.batchData.length; index++) {
        const element = this.batchData[index]
        list.push(element.goodsId)
      }
      putAction('/goods/yoshopGoodsCategory/batchEdit', {
        goodsIds: list,
        categoryId: data.id,
        storeId: this.accountBookId,
      }).then((res) => {
        if (res.success) {
          this.$elMessage.success(res.message)
          this.cancelMove()
          this.getTableData()
        } else {
          this.$elMessage.error(res.message)
        }
      })
    },
    cancelMove() {
      this.filterText = ''
      this.moving = false
    },
    // 触发新增树形节点按钮
    onAddTree(data) {
      // this.newTreeData = {
      //   data,
      //   state: 'add',
      //   module: {
      //     name: 'goodsTypeName', //类别名称字段
      //     code: 'typeCode', //类别编码字段
      //     pyCode: 'pinYinCode', //类别拼音码字段
      //     indexCode: 'indexCode', //类别排序码字段
      //   },
      //   getTreeUrl: '/yoshopCategory/categoryAllList', //获取类别接口
      //   deleteTreeUrl: '/yoshopCategory/delete', //删除类别接口
      //   addTreeUrl: '/yoshopCategory/add', //新增类别接口
      //   editTreeUrl: '/yoshopCategory/edit', //修改类别接口
      // }
      // this.showNewTree = true
      this.$refs.AddForm.add()
    },
    // 触发修改树形节点按钮
    onEditTree(node, data) {
      // this.newTreeData = {
      //   data: data,
      //   state: 'edit',
      //   module: {
      //     name: 'goodsTypeName', //类别名称字段
      //     code: 'typeCode', //类别编码字段
      //     pyCode: 'pinYinCode', //类别拼音码字段
      //     indexCode: 'indexCode', //类别排序码字段
      //   },
      //   getTreeUrl: '/yoshopCategory/categoryAllList', //获取类别接口
      //   deleteTreeUrl: '/yoshopCategory/delete', //删除类别接口
      //   addTreeUrl: '/yoshopCategory/add', //新增类别接口
      //   editTreeUrl: '/yoshopCategory/edit', //修改类别接口
      // }
      // this.showNewTree = true
      this.$refs.AddForm.add(data)
    },
    // 类别信息新增/修改后数据获取
    onSaveTreeChanges() {
      this.getTreeData()
      this.showNewTree = false
      // this.editTreeDataSta = true
    },
    // 类别信息取消按钮触发
    onCancelTree() {
      this.showNewTree = false
    },
    // 触发删除树形节点按钮
    onDeleteTree(data) {
      console.log(data)
      if (data.children.length) {
        this.$elMessage({
          showClose: true,
          message: '类别下级有分类，不允许删除！',
          type: 'error',
          iconClass: 'el-icon-warning-outline',
          duration: 3000,
        })
      } else {
        this.tipsData.tipsState = 'delete'
        this.tipsData.tipsWords = '是否确认删除?'
        this.tipsData.tipsMark = 'onDeleteTree'
        this.$refs.reminderRef.dialogVisible = true
        this.nowTreeId = data.id
      }
    },
    // 触发表格修改按钮
    onEditRow(val, isDetails) {

      var that = this
      // 获取商品详情
      getAction('/goods/yoshopGoods/queryById', {
        id: val.goodsId,
      }).then((res) => {
        if (res.code === 200) {
          let data = res.result
          this.xghGoodsQueryById(data, data.xghJxcGoodsId, isDetails)
        } else {
          this.$elMessage({
            showClose: true,
            message: res.message,
            type: 'error',
            iconClass: 'el-icon-warning-outline',
            duration: 3000,
          })
        }
      })
    },
    xghGoodsQueryById(data, id, isDetails) {
      if (!id) {
        // 处理没有id的情况
        let newData = {}
        // 初始化必要的数据结构
        newData.goodsManyNorms = this.$options.data().newData.goodsManyNorms
        // 显示表单，使用空对象作为数据
        this.$refs.commodityAddRef.setInfos([])
        this.$refs.commodityAddRef.show(newData, data, this.columnData, '1', isDetails)
        return
      }
      
      getAction('/xghGoods/xghGoods/queryById', {
        id: id,
      }).then((res) => {
        if (res.code === 200) {
          let newData = res.result || {}
          // this.newData = res.result
          newData.multiPriceStatus = newData.multiPriceStatus === 'true' ? true : false
          newData.priceStatus = newData.priceStatus === 'true' ? true : false
          newData.stockWarningStatus = newData.stockWarningStatus === 'true' ? true : false
          newData.multiStockWarningStatus = newData.multiStockWarningStatus === 'true' ? true : false
          newData.stockStatus = newData.stockStatus === 'true' ? true : false
          newData.multiStockStatus = newData.multiStockStatus === 'true' ? true : false
          if (newData.goodsManyNorms && newData.goodsManyNorms.length) {
            newData.goodsManyNorms.forEach((item, index) => {
              item['xhState'] = true
              item['extendField1'] = newData.extendField1
              item['extendField2'] = newData.extendField2
              item['extendField3'] = newData.extendField3
              item['extendField4'] = newData.extendField4
              item['extendField5'] = newData.extendField5
            })
          } else {
            let obj = this.$options.data().newData.goodsManyNorms
            obj[0].unit = newData.baseUnit
            newData.goodsManyNorms = obj
          }
          newData.goodsWarnings &&
            newData.goodsWarnings.forEach((item) => {
              item['xhState'] = true
            })
          if (newData.goodsWarnings && newData.goodsWarnings.length) {
            newData.goodsWarnings[0]['storehouseName'] = '总数量预警'
          }
          newData.initialInventoryInfos &&
            newData.initialInventoryInfos.forEach((item) => {
              item['xhState'] = true
              item.costPriceShow = formatPrice(item.costPrice)
              item.numberShow = formatNumber(item.number)
              item.stockPriceShow = formatMoney(item.stockPrice)
            })
          // console.log(newData.goodsManyNorms)
          console.log("--newData.initialInventoryInfos",newData.initialInventoryInfos)
          console.log("--newData",newData)
          console.log("--data",data)
          console.log("--this.columnData",this.columnData)


          this.$refs.commodityAddRef.setInfos(newData.initialInventoryInfos || [])
          this.$refs.commodityAddRef.show(newData, data, this.columnData, '1', isDetails)
        } else {
          this.$elMessage({
            showClose: true,
            message: res.message,
            type: 'error',
            iconClass: 'el-icon-warning-outline',
            duration: 3000,
          })
        }
      })
    },
    // 删除当前行
    onDeleteRow(row) {
      this.tipsData.tipsState = 'delete'
      this.tipsData.tipsWords = '是否确认删除?'
      this.tipsData.tipsMark = 'onDeleteRow'
      this.$refs.reminderRef.dialogVisible = true
      this.nowDataId = row.id
    },
    // 启用或禁用往来单位
    onChangeStatus(val) {
      this.nowData = val
      this.tipsData.tipsWords = '是否确认' + (val.disabledStatus ? '启用' : '停用') + '?'
      this.tipsData.tipsMark = 'onChangeStatus'
      this.$refs.reminderRef.dialogVisible = true
    },
    // 获取新增商品数据
    onAddCommodity() {
      this.getTableData(this.currentPage) // 修改后获取列表数据
      this.newData = this.$options.data().newData
    },
    // 获取修改商品数据
    onEditCommodity() {
      this.getData()
      this.newData = this.$options.data().newData
    },
    // 关闭新增往来单位时清空
    onCloseAddCommodity() {
      // 不修改数据不更新列表数据
      // this.getData()
      // this.newData = this.$options.data().newData
    },
    onCloseEditCommodity() {
      this.getData()
      this.newData = this.$options.data().newData
    },
    // 获取每页几条数据
    handleSizeChange(val) {
      this.pagesize = val
      this.getTableData()
    },
    // 获取当前第几页
    handleCurrentChange(val) {
      this.currentPage = val
      this.getTableData(val)
    },
    // 触发表格多选按钮
    handleSelectionChange(val) {
      this.batchData = val
      console.log("多选数据",this.batchData)
    },
    // 导入数据
    importImg() {
      this.$refs.daoruImg.dialogVisible = true
    },
    importData(res) {
      console.log(res)
      this.tipsData.tipsWords = res.message
      this.$refs.successImportRef.dialogVisible = true
      this.getData()
    },
    // 导出数据
    exportExcel() {
      let list = []
      // if (this.batchData && this.batchData.length > 0) {
      //   for (let index = 0; index < this.batchData.length; index++) {
      //     const element = this.batchData[index]
      //     list.push(element.id)
      //   }
      // } else {
      //   this.$elMessage.warning('请选择想要导出的数据！')
      //   return
      // }
      let queryParam = {
        fileName: '商品信息',
        selections: list.join(','),
      }
      this.handleExportXlsByStaff('商品信息', queryParam)
    },
    // 合计列计算
    getSummaries(param) {
      const that = this
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
        } else if (index === 1) {
          sums[index] = '共' + that.tableData.total + '条明细'
        } else if (
          column.property === 'useNumber' ||
          column.property === 'number' ||
          column.property === 'retailPrice'
        ) {
          const values = data.map((item) => delcommafy(item[column.property]))
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = delcommafy(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
            if (column.property === 'retailPrice') {
              sums[index] = that.$formatPrice(sums[index])
            } else {
              sums[index] = that.$formatNumber(sums[index])
            }
          }
        } else {
          sums[index] = ''
        }
      })
      return sums
    },
    // 移动分类
    moveToCategary() {
      if (this.batchData.length > 0 && this.buttonsPermissions.XiuGai) {
        this.moving = true
      }
    },
    // 批量修改商品属性
    changeExtendProperty() {
      if (!this.buttonsPermissions.XiuGai) {
        return this.$message.warning('没有修改权限')
      }if (this.batchData.length == 0) {
        return this.$message.warning('请先选择商品')
      }
      this.extendValues = this.columnData.map((item) => {
        if (item.props.includes('extendField')) {
          let vals = []
          for (let index = 0; index < this.batchData.length; index++) {
            const element = this.batchData[index];
            let val = element[item.props]
            if (val && !vals.includes(val)) {
              vals.push(val)
            }
          }
          return {
            props: item.props,
            textValue: vals.join(','),
            constValue: vals.join(','),
            zidingyiName: item.zidingyiName || item.morenName
          }
        }
      }).filter(item => item)
      this.extendVisible = true
    },
    onExtendConfirm() {
      let extendFields = this.batchData.map(item => {
        let result = {
          id: item.id
        }
        for (let index = 0; index < this.extendValues.length; index++) {
          const element = this.extendValues[index];
          if (element.constValue != element.textValue) {
            result[element.props] = element.textValue
          } else if (element.textValue && !element.textValue.includes(',')) {
            result[element.props] = element.textValue
          }
        }
        return result
      })

      postAction('/xghGoods/xghGoods/batchUpdateExtendField', {extendFields}).then(res => {
        console.log(res);
        if (res.success) {
          this.onExtendCancel()
          this.$message.success(res.message)
          this.getTableData(this.currentPage)
        } else {
          this.$message.error(res.message)
        }
        
      })
    },
    onExtendCancel() {
      this.extendVisible = false
    },
    changePrice() {
      if (!this.buttonsPermissions.XiuGai) {
        return this.$message.warning('没有修改权限')
      }if (this.batchData.length == 0) {
        return this.$message.warning('请先选择商品')
      }
      this.$refs.goodsAdjust.show(this.batchData, 'price')
    },
    changeDiscount() {
      if (!this.buttonsPermissions.XiuGai) {
        return this.$message.warning('没有修改权限')
      }if (this.batchData.length == 0) {
        return this.$message.warning('请先选择商品')
      }
      this.$refs.goodsAdjust.show(this.batchData, 'discount')
    },
  },
}
</script>

<style lang="scss" scoped>
.basic_info {
  width: 100%;
  height: 100%;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
}

.info_operation_btn {
  width: 100%;
  padding: 0 10px;
  min-height: 50px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-shrink: 0;

  .el-button {
    // width: 70px;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 5px;
    // border: none;
    // margin-right: 0.112507rem;
    flex-shrink: 0;
    margin: 5px;
    font-weight: 400;
  }

  .el-button--default {
    color: #666;
  }

  .btn_left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;

    ::v-deep .el-checkbox__label {
      font-size: 12px;
      padding-left: 0.1rem;
    }

    ::v-deep .el-select {
      width: 95px;
      height: 30px;
      font-size: 12px;
      box-sizing: border-box;
      margin-right: 0.112507rem;
      flex-shrink: 0;

      .el-input {
        .el-input__inner {
          height: 30px;
          border: none;
          font-size: 12px;
        }

        .el-input__suffix {
          height: 30px;
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .btn_right {
    width: max-content;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-input {
      width: 4.725295rem;
      height: 30px;
      margin-right: 0.112507rem;

      ::v-deep .el-input__inner {
        height: 30px;
        // border: none;
        box-sizing: border-box;
        padding: 0 0.15rem;
        background: #fff;
        font-size: 12px;
        color: #666;

        &::placeholder {
          font-size: 12px;
          color: #c1c1c1;
        }
      }
    }

    .el-button {
      width: 70px;
      margin-left: 0;
    }

    .set_up {
      font-size: 23px;
      color: rgb(153, 153, 153);
    }
  }
}

.info_content_div {
  width: 100%;
  height: calc(100% - 70px);
  background: #fff;
  box-sizing: border-box;
  padding: 10px;
  display: flex;

  .div_tree {
    width: 2.812676rem;
    height: calc(100% - 50px);
    box-sizing: border-box;
    padding: 0.131258rem 0;
    border: 0.018751rem solid #e3e3e3;
    transition: all 0.3s;
    overflow-x: auto;

    .tree_div1 {
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      p {
        color: #666666;
        font-size: 12px;
        margin: 0;

        &:last-child {
          color: #1b93f9;
        }
      }

      .el-button {
        width: 70px;
        height: 0.38rem;
        text-align: center;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        border-radius: 0;
        border: none;
      }
    }

    .tree_input {
      width: 100%;
      height: 30px;
      margin-top: 0.131258rem;
      box-sizing: border-box;
      padding: 0 0.168761rem;

      p {
        width: 100%;
        height: 30px;
        margin: 0;
        box-sizing: border-box;
        border: 1px solid #dddddd;
        display: flex;
        align-items: center;
        position: relative;

        input {
          width: 100%;
          box-sizing: border-box;
          height: 28px;
          padding: 0 5px;
          border: none;
          font-size: 12px;

          &:focus {
            outline: none;
          }
        }

        span {
          position: absolute;
          right: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 0.55rem;
          height: 28px;
          background: #fff;

          .el-icon-search {
            font-size: 0.25rem;
            color: rgb(211, 211, 211);
          }
        }
      }
    }

    .tree_structure {
      width: 100%;
      height: calc(100% - 80px);
      box-sizing: border-box;
      padding: 0 0.168761rem;
      margin-top: 0.131258rem;
      overflow: auto;

      ::v-deep .el-tree {
        width: 100%;

        .tree_node {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          span {
            font-size: 12px;
          }

          .show_nodex {
            font-size: 0.25rem;
            display: flex;
            align-items: center;

            i {
              margin-right: 0.15rem;
              font-weight: 600;
            }

            .el-icon-circle-plus-outline {
              color: #1993fb;
            }

            .el-icon-edit-outline {
              color: #1993fb;
            }

            .el-icon-delete {
              color: #ff2626;
            }
          }
        }

        .el-tree-node__children {
          .el-tree-node__label {
            color: #666;
            font-weight: normal;
          }
        }

        .el-tree-node__label {
          font-size: 12px;
          font-weight: 600;
        }

        .is-current {
          .el-tree-node__content {
            background-color: #e6f7ff;
          }
        }

        .el-tree-node__content > .el-tree-node__expand-icon {
          padding-left: 0;
        }
      }
    }
  }

  .new_div_tree_width {
    width: 4.125258rem;
  }

  .div_table {
    width: calc(100% - 3rem);
    height: 100%;
    margin-left: 0.187512rem;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    transition: all 0.3s;

    .table_content {
      height: calc(100% - 80px);

      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        border-bottom: none;
        box-sizing: border-box;

        th {
          .el-input {
            .el-input__inner {
              padding-left: 3px;
              border: #707070 solid 1px;
              border-radius: 0;
            }
          }
        }

        th,
        td {
          padding: 0;
          color: #666;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;

          .cell {
            min-height: 30px;
            // display: flex;
            // align-items: center;
            font-size: 12px;
            padding: 5px;
          }

          &:first-child {
            .cell {
              justify-content: center;
              padding: 0;
            }
          }

          &:nth-child(2) {
            .cell {
              justify-content: center;
            }
          }

          &:last-child {
            .cell {
              justify-content: center;
            }
          }
        }

        th {
          .cell {
            background: #ededed;
            justify-content: center;
          }
        }

        .el-checkbox {
          .is-indeterminate {
            .el-checkbox__inner {
              color: #1b93f9;
              background-color: #1b93f9;
              border-color: #1b93f9;
            }
          }
        }

        .el-icon-edit-outline {
          font-size: 20px;
          color: #1b93f9;
          margin-right: 0.037502rem;
        }

        .el-icon-delete {
          font-size: 20px;
          color: #ff2626;
          margin-left: 0.037502rem;
        }

        .el-table__body tr:hover > td {
          background: #e3f6ff;
        }

        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }

        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }

        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }

    .total_record {
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      padding: 0 0.25rem;
      border: 1px solid #e3e3e3;
      border-top: none;
      background: #f4f4f4;
      display: flex;

      p {
        margin: 0;
        line-height: 30px;
        padding-right: 0.25rem;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
      }
    }

    .table_pagination {
      width: 100%;
      height: 50px;
      box-sizing: border-box;
      padding: 0.168761rem 0;
      display: flex;

      .pagination_div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;

        ::v-deep .el-pagination {
          padding: 0;
          height: 30px;

          .el-pagination__sizes {
            margin: 0;

            .el-input {
              margin-right: 0;
            }
          }
        }
      }
    }
  }

  .new_div_table_width {
    width: calc(100% - 4.31277rem);
  }
}

.disabled_button {
  background: #cbced3 !important;
  color: #666 !important;
}
.pretend_view {
  padding: 0 10px;
  background-color: #ddd;
  border-radius: 5px;
  height: 30px;
  line-height: 30px;
  margin-right: 10px;
  font-size: 12px;
  flex-shrink: 0;
  margin: 5px;
  &.active {
    background-color: #fff;
  }
}
.move_mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba($color: #000000, $alpha: 0.1);
  z-index: 10;
  padding: 10px;

  .div_tree {
    margin-top: 50px;
    width: 2.812676rem;
    height: calc(100% - 120px);
    box-sizing: border-box;
    padding: 0.131258rem 0;
    border: 0.018751rem solid #e3e3e3;
    transition: all 0.3s;
    overflow-x: auto;
    background-color: #fff;

    .tree_div1 {
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      p {
        color: #666666;
        font-size: 12px;
        margin: 0;

        &:last-child {
          color: #1b93f9;
        }
      }

      .el-button {
        width: 70px;
        height: 0.38rem;
        text-align: center;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        border-radius: 0;
        border: none;
      }
    }

    .tree_input {
      width: 100%;
      height: 30px;
      margin-top: 0.131258rem;
      box-sizing: border-box;
      padding: 0 0.168761rem;

      p {
        width: 100%;
        height: 30px;
        margin: 0;
        box-sizing: border-box;
        border: 1px solid #dddddd;
        display: flex;
        align-items: center;
        position: relative;

        input {
          width: 100%;
          box-sizing: border-box;
          height: 28px;
          padding: 0 5px;
          border: none;
          font-size: 12px;

          &:focus {
            outline: none;
          }
        }

        span {
          position: absolute;
          right: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 0.55rem;
          height: 28px;
          background: #fff;

          .el-icon-search {
            font-size: 0.25rem;
            color: rgb(211, 211, 211);
          }
        }
      }
    }

    .tree_structure {
      width: 100%;
      height: calc(100% - 80px);
      box-sizing: border-box;
      padding: 0 0.168761rem;
      margin-top: 0.131258rem;
      overflow: auto;

      ::v-deep .el-tree {
        width: 100%;

        .tree_node {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          span {
            font-size: 12px;
          }

          .show_nodex {
            font-size: 0.25rem;

            i {
              margin-right: 0.15rem;
              font-weight: 600;
            }

            .el-icon-circle-plus-outline {
              color: #1993fb;
            }

            .el-icon-edit-outline {
              color: #1993fb;
            }

            .el-icon-delete {
              color: #ff2626;
            }
          }
        }

        .el-tree-node__children {
          .el-tree-node__label {
            color: #666;
            font-weight: normal;
          }
        }

        .el-tree-node__label {
          font-size: 12px;
          font-weight: 600;
        }

        .is-current {
          .el-tree-node__content {
            background-color: #e6f7ff;
          }
        }

        .el-tree-node__content > .el-tree-node__expand-icon {
          padding-left: 0;
        }
      }
    }
  }
}

.changeExtend {
  .extendView {
    display: flex;
    justify-content: center;

    .title {
      color: #1a93fa;
      padding: 10px 10px;
    }
  }
  .extendItem {
    padding: 10px 10px;
  }
  .dialog_bottom {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;

    .el-button {
      width: 80px;
    }
  }
  ::v-deep .el-dialog {
    .el-dialog__body {
      padding: 10px 30px;
    }
  }
}

.info_tabs{
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  ::v-deep .el-tabs__nav-wrap{
    &::after{
    background-color: transparent;
    }
  }

  .el-button {
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 5px;
    border: none;
    flex-shrink: 0;
    margin: 5px;
    font-weight: 400;
  }
}
</style>

